<template>
	<div>
		<br />
		<div>
			<Input v-model="fliter.email">

			<Button slot="append" icon="ios-search" style="background: lightblue;color: white;" @click='onSearch'></Button>
			<Button type="success" slot="append" style="width: 80px;margin-left: 10px;background: lightgreen;color: white;" @click="onAdd">添加信息</Button>
			<Button type="error" slot="append" style="width: 80px;margin-left: 10px;background: lightcoral;color: white;" @click='onDeletes'>删除选中</Button>
			</Input>

		</div>
		<br />
		<Table border :columns="columns7" :data="fliter.list" @on-selection-change='onSelection'></Table>
		<br />
		<Row>
			<Col offset="8">
			<Page :total="fliter.total" size="small" show-total show-elevator show-sizer @on-change='onChange' @on-page-size-change='onPageSize'></Page>
			</Col>
		</Row>

		<Modal v-model="modal1" title="用户模块管理">
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
				<FormItem label="姓名" prop="uname">
					<Input v-model="formValidate.uname" placeholder="请输入姓名"></Input>
				</FormItem>
				<FormItem label="邮箱" prop="email">
					<Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
				</FormItem>
				</FormItem>
				<FormItem label="密码" prop="password">
					<Input v-model="formValidate.password" placeholder="请输入邮箱"></Input>
				</FormItem>

				</FormItem>
				<FormItem label="手机号" prop="telephone">
					<Input v-model="formValidate.telephone" placeholder="请输入邮箱"></Input>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
					<Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	import md5 from 'crypto-js/md5';
	export default {
		
		data() {
			return {
				formValidate: {
					uname: '',
					email: '',
					telephone: '',
					password: ''
				},
				ruleValidate: {
					uname: [
						{ required: true, message: '姓名不能为空', trigger: 'blur' }
					],
					email: [
						{ required: true, message: '邮箱不能为空', trigger: 'blur' },
						{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
					],
					telephone: [
						{ required: true, message: '手机号不能为空', trigger: 'blur' },

					],
					password: [
						{ required: true, message: '密码不能为空', trigger: 'blur' },
					]
				},
				columns7: [{
						type: 'selection',
						width: 60,
						align: 'center'
					}, {
						title: '昵称',
						key: 'name',
						render: (h, params) => {
							return h('div', [
								h('strong', params.row.uname)
							]);
						}
					},
					{
						title: '密码',
						key: 'password'
					},
					{
						title: '邮箱',
						key: 'email'
					},
					{
						title: '联系方式',
						key: 'telephone'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.row)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				ids: [],
				modal1: false,
				fliter: {
					list: [],
					total: 0,
					page: 1,
					limit: 10,
					email: '',
				}
			}
		},
		methods: {
			show(row) {
				this.modal1 = true,
					Object.assign(this.$data.formValidate, row)
			},
			remove(index) {

				this.$Modal.confirm({
					title: '确认删除数据吗',
					content: '删除后这些数据将无法找回',
					loading: true,
					onOk: () => {
						setTimeout(() => {
							this.$http.delete('http://localhost:3000/users/data/' + this.fliter.list[index]._id)
								.then(res => {
									this.getData()
								})
							this.$Modal.remove();
						}, 1000);
					}
				});

			},
			getData() {
				this.$http.post('http://localhost:3000/users/list', this.fliter)
					.then(res => {
						this.fliter.list = res.data.rows
						this.fliter.total = res.data.total
						this.fliter.page = res.data.page
					})
			},
			onChange(page) {
				this.fliter.page = page;
				this.getData()
			},
			onPageSize(pageSize) {
				this.fliter.limit = page;
				this.getData()
			},
			onSearch() {
				this.getData()
			},
			onSelection(rows) {
				var ids = [];
				var idLen = rows.length;
				for(var i = 0; i < idLen; i++) {
					ids.push(rows[i]._id);
				}
				this.ids = ids;
			},
			onAdd(){
				this.modal1 = true,
				Object.assign(this.$data.formValidate, this.$options.data().formValidate)
			},
			onDeletes() {
				this.$Modal.confirm({
					title: "确认删除",
					content: "<p>确定删除吗</p>",
					onOk: () => {
						this.$http
							.post("http://localhost:3000/users/deletes", {
								ids: this.ids.toString()
							})
							.then(res => {
								this.$Message.info

								("删除成功");
								this.getData();
							});
					}
				});
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					this.formValidate.password=md5(this.formValidate.password).toString()
					if(valid) {
						if(this.formValidate._id && this.formValidate._id.length > 0) {
							console.log(this.formValidate)
							this.$http.put('http://localhost:3000/users/data/'+this.formValidate._id, this.formValidate).then(
								res => {
									this.$Message.success('提交成功!');
									this.modal1 = false,
										this.getData();

								}
							)
						} else {
							console.log(this.formValidate)
							this.$http.post('http://localhost:3000/users/data', this.formValidate).then(
								res => {
									this.$Message.success('提交成功!');
									this.modal1 = false,
										this.getData();

								}
							)

						}
					} else {
						this.$Message.error('表单验证失败!');

					}
				})
			},
			handleReset(name) {
				this.$refs[name].resetFields();
			}

		},
		created() {
			this.getData()
		}
	}
</script>